<template>
    <div class="top-navbar" v-if="visible" :class="themeClass">
      <div class="left-section">
        <van-icon v-if="showBack" name="arrow-left" class="back-icon" @click="goBack" />
        <!-- <div class="logo" v-if="showLogo">
          <van-icon name="cash-back" size="24" />
          <span>{{ appName }}</span>
        </div> -->
      </div>
      
      <div class="title">{{ title }}</div>
      
      <div class="right-section">
        <van-icon v-if="showSettings" name="setting-o" size="20" @click="showSettingsPanel = true" />
        <van-icon v-if="showLanguage" name="globe-o" size="20" @click="showLocalePicker" />
        <!-- <van-icon v-if="showUser" name="user-o" size="20" @click="goToProfile" /> -->
      </div>
    </div>
      <!-- 设置面板 -->
      <van-popup v-model:show="showSettingsPanel" position="right" :style="{ width: '70%', height: '100%' }">
        <div class="settings-panel">
          <h2>{{ $t('common.settings') }}</h2>
          <van-cell :title="$t('common.changeLanguage')" is-link @click="showLocalePicker = true">
            <template #value>
              {{ currentLocale === 'zh-CN' ? '中文' : 'English' }}
            </template>
          </van-cell>
          <van-cell :title="$t('common.changeTheme')" is-link @click="toggleTheme">
            <template #value>
              {{ currentTheme === 'light' ? $t('common.lightTheme') : $t('common.darkTheme') }}
            </template>
          </van-cell>
          <van-cell :title="$t('common.logout')" is-link @click="handleLogout" />
        </div>
      </van-popup>
      
      <!-- 语言选择器 -->
      <van-popup v-model:show="showLocalePicker" position="bottom" round>
        <van-picker
          :columns="localeOptions"
          @confirm="onLocaleConfirm"
          @cancel="showLocalePicker = false"
        />
      </van-popup>
  </template>
  
  <script setup>
  import { ref, onMounted, computed } from 'vue';
  import { useRouter } from 'vue-router';
  import { useI18n } from 'vue-i18n';
  import { useThemeStore } from '@/stores/theme';
  import { useLocaleStore } from '@/stores/locale'
  import { useUserStore } from '@/stores/user'
  
  const { t } = useI18n()
  const router = useRouter();
  const themeStore = useThemeStore();
  
  const showSettingsPanel = ref(false)
  const showLocalePicker = ref(false)

  const localeStore = useLocaleStore()
  const userStore = useUserStore()
  
  // 计算属性
  const currentTheme = computed(() => themeStore.currentTheme)
  const currentLocale = computed(() => localeStore.currentLocale)
  
  // 选项数据
  const localeOptions = [
    { text: '中文', value: 'zh-CN' },
    { text: 'English', value: 'en-US' }
  ]

  // 初始化状态
  onMounted(() => {
    themeStore.initTheme()
    localeStore.initLocale()
  })
  
  const props = defineProps({
    visible: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: ''
    },
    showBack: {
      type: Boolean,
      default: false
    },
    showLogo: {
      type: Boolean,
      default: false
    },
    showSettings: {
      type: Boolean,
      default: false
    },
    showLanguage: {
      type: Boolean,
      default: false
    },
    showUser: {
      type: Boolean,
      default: false
    }
  });
  
  const emit = defineEmits(['show-settings', 'show-locale-picker']);
  
  const appName = computed(() => t('common.appName'));
  const themeClass = computed(() => themeStore.currentTheme);
  
  const goBack = () => {
    router.go(-1);
  };
  
  // const goToProfile = () => {
  //   router.push('/profile');
  // };

  const toggleTheme = () => {
    themeStore.toggleTheme()
  }
  
  const onLocaleConfirm = ({ selectedValues }) => {
    localeStore.setLocale(selectedValues.join(','))
    showLocalePicker.value = false
    // showToast(t('common.languageChanged'))
  }
  
  const handleLogout = () => {
    userStore.logout()
    showSettingsPanel.value = false
    router.push({ name: 'Login' })
    // showToast(t('common.logoutSuccess'))
  }
  </script>
  
  <style lang="scss" scoped>
  .top-navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    z-index: 1000;
    transition: all 0.3s;
    
    &.light {
      background-color: var(--card-bg);
      color: var(--text-color);
      border-bottom: 1px solid var(--border-color);
    }
    
    &.dark {
      background-color: var(--card-bg);
      color: var(--text-color);
      border-bottom: 1px solid var(--border-color);
    }
    
    .left-section {
      display: flex;
      align-items: center;
      min-width: 80px;
      
      .back-icon {
        margin-right: 12px;
        cursor: pointer;
      }
      
      .logo {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
      }
    }
    
    .title {
      font-size: 18px;
      font-weight: 600;
      flex-grow: 1;
      text-align: center;
      padding: 0 10px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .right-section {
      display: flex;
      align-items: center;
      min-width: 80px;
      justify-content: flex-end;
      gap: 16px;
      
      .van-icon {
        cursor: pointer;
      }
    }
  }
  </style>